<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>佣金提现</title>
	<link rel="stylesheet" type="text/css" href="../../../../bangnuo/admin/layui/css/layui.css">
</head>
<body style="margin: 10px; padding: 10px;">
<div style="width: 100%; height: 888px;">
	<div style="margin: 30px;">
		<table border="0" style="width: 100%; height: 100%;">
			<tr>
				<td style="text-align: left;">
					<p style="color: #007DDB; font-size: 20px;">我的佣金数据</p>
				</td>
				<td style="text-align: right;">
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" onclick="jilu()">我的提现记录</button>
						</div>
					</div>
				</td>
			</tr>
		</table>
		<hr />
		<!-- 面板和搜索框 -->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item" style="margin: 10px;">
						<label class="layui-form-label">月份</label>
						<div class="layui-input-block" style="float: left;">
							<input type="text" name="startTime" id="startTime"    placeholder="开始时间"
								   autocomplete="off" class="layui-input">
						</div>
						<div style="float: left; margin: 10px;">~</div>
						<div class="layui-input-block" style="float: left; margin-left: 0px;">
							<input type="text" name="endTime" id="endTime"   placeholder="结束时间" autocomplete="off"
								   class="layui-input">
						</div>
						<div style="float: left; margin: 0px;">
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<hr />
	<!-- 表单 -->
	<table id="demo" lay-filter="test"></table>
</div>
</body>
<script type="text/javascript" src="../../../../bangnuo/admin/layui/layui.js"></script>
<script>
	function jilu(){
		layui.use('layer', function(){
		  var layer = layui.layer;
		  var index = layer.open({
		    type: 2, 
		    content: '../../common/record.html',
			area : ['1700px', '800px'],
		  }); 
		  layer.full(index);
		});
	}
</script>

<script type="text/html" id="status">
	{{# if(d.withdrawalStatus == 0){ }}
	<b style="color: blue;">审核中</b>
	{{# } else if(d.withdrawalStatus == 1) { }}
	<b style="color: red;">已驳回</b>
	{{# } else if(d.withdrawalStatus == 2) { }}
	<b style="color: red;">已打款</b>
	{{# } else if(d.withdrawalStatus == 3) { }}
	<b style="color: red;">未申请</b>
	{{# } }}
</script>
<script type="text/javascript">
	layui.use(['form', 'laydate', 'table'], function() {
		var form = layui.form,
				laydate = layui.laydate,
				table = layui.table;
		laydate.render({
			elem: '#startTime', //指定元素
			type: 'month'
		});
		laydate.render({
			elem: '#endTime', //指定元素
			type: 'month'
		});

		//监听提交
		form.on('submit(formDemo)', function(data) {
            table.reload('demo', {
                url: '/commission/findMouthList'
                ,where: {
                    "startTime": data.field.startTime,
                    "endTime": data.field.endTime,
                } //设定异步数据接口的额外参数
                //,height: 300
            });
			return false;
		});

		//第一个实例
		table.render({
			elem: '#demo',
			url: '/commission/findMouthList', //数据接口
			page: true, //开启分页
			method: 'post',
			contentType: "application/json;charset=UTF-8",
			response: {
				"statusName": "code",
				"statusCode": 10000,
				"msgName": "message",
				"countName": "total",
				"dataName": "queryResult"
			},
            where: {
                //"startTime": data.field.startTime1,
                //"endTime": data.field.endTime1,
				"status":1
            },
            parseData: function(res) {
				return {
					"code": res.code,
					"message": res.message,
					"total": res.queryResult.total,
					"queryResult": res.queryResult.list
				};
			},
			request: {
				pageName: 'page' //页码的参数名称，默认：page
				,
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			cols: [
				[ //表头
					{
						field: 'id',
						title: '编号',
						width: 200,
						sort: true,
						fixed: 'left'
					}, {
					field: 'monthDate',
					title: '日期',
					width: 200,
					sort: true
				}, {
					field: 'aliPay',
					title: '官方支付宝',
					width: 200,
					sort: true
				}, {
					field: 'wxPay',
					title: '官方微信',
					width: 200,
					sort: true
				}, {
					field: 'thirdParty',
					title: '间联通道',
					width: 200,
					sort: true
				}, {
					field: 'sum',
					title: '合计',
					width: 200,
					sort: true
				}, {
					field: 'remark',
					title: '返佣备注',
					width: 200
				}, {
					field: 'withdrawalStatus',
					title: '状态',
					width: 80,
					templet:"#status"
				}, {
					field: '',
					title: '操作',
					templet: '#barDemo'
				}
				]
			]
		});
		//监听工具条
		table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

			if (layEvent === 'detail') { //查看
			    var content = "";
			    if(data.withdrawalStatus == 3){
                    content = '../../common/application.html?orderTotalMonthId='+data.id+'&sum='+data.sum
				}else{
                    content = '../../common/applications.html?orderTotalMonthId='+data.id+'&sum='+data.sum
				}
				//do somehing
				var index = layer.open({
					type: 2,
					area : ['1700px', '800px'],
					title : '提现申请',
					content : content,
				});
				layer.full(index);
			}
		});
	});
</script>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>
</html>
